前端起步走 - 學習Pug - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 5

Modern Web

前端設計轉前端工程師-JS踩坑雜記 30 天系列第 5 篇

前端起步走 - 學習Pug

12th鐵人賽

PollyPO技術

團隊自討苦吃三十天#像極了愛情

2020-09-13 07:34:15

3006 瀏覽

分享至

在就職前端設計的前2年，我的目標就只有努力學習優化自己的 HTML 架構和切版的速度
那2年下來我改過、寫過的套板、自刻板應該有超過 100 組... (可能不止)

期間我幾乎都在想怎麼能更快、更好的產出 UI 切板
所以除了學習 SCSS，我還去翻了很多技術文章看看還有沒有可以加快切版速度的方式
翻到 Pug 之後，我就決定是它了~XD

以下是我之前的自學筆記 + 雜記，整理一下跟大家分享
當然，還是老話一句 實作! 實作! 實作!

PUG 簡介

Pug (舊名：Jade) 是一種 HTML 模板語言
可以將 HTML 拆成一組一組，模組化入門款
而且還支援 JavaScript 邏輯 (重點)

省去開閉合標籤

剛開始是因為看到可以只打一個 HTML Tag，所以選它 (非常單純)
打開 CodePen 實作的第一個感受就是 媽媽呀~好方便
而且版面變得好簡潔，也不怕移 Code 少移一個 Tag (爽)
不信，你們看

.container
    .row
        .col-xs-12
            .titlebar_line
                h2.titles_line_font Skills
        .col-xs-12
            ul.uki_skills
                li
                    i.fab.fa-html5
                li
                    i.fab.fa-css3-alt
                li
                    i.icon-pug
                li
                    i.fab.fa-sass
                li
                    i.fab.fa-js-square
                li
                    i.fab.fa-gulp
                li
                    i.fab.fa-npm
                li
                    i.fab.fa-git
                li
                    i.fab.fa-github-alt
                li 
                    i.fab.fa-vuejs

是不是~~~~~~~~ (超自 High)

HTML 模組化

Pug 可以把重複的區塊拆出去，像是 Header、Footer...等等
用 include 的方式引進來
這對當時身在接案公司，身上一次4-5個專案在跑的網頁設計菜雞 PO
根本是 天下降下耶穌光啊啊啊!!!!!

你們知道在以前我要改一個 Footer 選單文字，一個網站有 5 頁，改 5 次，有 20 頁，改 20 次，有 100 頁，我要改 100 次啊啊啊啊啊啊!!!! (激動到沒有辦法分行)

簡單講一下我怎麼切我的區塊：

建一個頁面模版 (Layout.pug)

<!DOCTYPE html>
html(lang="zh-Hant-TW")
	head
		include ../include/_head.pug
	body
		#warpper
			include ../include/_navbar.pug
			block content
			include ../include/_footer.pug

頁面 (index.pug)

extend layout/_layout.pug

block content
    .container
        .row
            .col-xs-12
                .titlebar_line
                    h2.titles_line_font Skills
            .col-xs-12
                ul.uki_skills
                    li
                        i.fab.fa-html5
                    li
                        i.fab.fa-css3-alt
                    li
                        i.icon-pug
                    li
                        i.fab.fa-sass
                    li
                        i.fab.fa-js-square
                    li
                        i.fab.fa-gulp
                    li
                        i.fab.fa-npm
                    li
                        i.fab.fa-git
                    li
                        i.fab.fa-github-alt
                    li 
                        i.fab.fa-vuejs

小小說明一下 (以下是阿宅 PO 自己的筆記)：
繼承 extends/block
Block 很像在 Layout 開一個框框，引入頁面內容。用類似的東西來舉例；Vue - App.vue 中的 Router-view
Extends 將這個頁面內容嵌到 Layout.pug 中 block content 這個區塊

當然更詳細的，還是請各位捧油前往官網看看: Pug Template Inheritance

Pug 的部分目前阿宅 PO 只介紹到這裡
原因是因為我大多切版只有用到這幾個...
之後會再補充 Mixin 和結合 JS 邏輯的部分

不得不說，因為寫過 Pug
我後來第一次接觸到 Vue 框架要切版的時候，倍感親切 XDDD
幾乎馬上上手 成就感 Level upupupupupupupup

這一篇不專業的 Pug 簡介，希望大家喜歡~~